<template>
    <section
        :style="{
            paddingTop: itemConfig.paddingTop + 'px',
            paddingBottom: itemConfig.paddingBottom + 'px',
            marginTop: itemConfig.marginTop + 'px',
            marginBottom: itemConfig.marginBottom + 'px',
            background: `linear-gradient(
                ${itemConfig.bgEdg}deg,
                ${itemConfig.bgColorOne},
                ${itemConfig.bgColorTow},
                ${itemConfig.bgColorThree})`
        }"
    >
        <div class="max-w-[1200px] m-auto px-5">
            <div
                v-if="itemConfig.title || itemConfig.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: itemConfig.headerBottom + 'px' }"
            >
                <h3
                    v-if="itemConfig.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: itemConfig.titleColor }"
                >{{ itemConfig.title }}</h3>

                <p
                    v-if="itemConfig.intro"
                    class="text-center text-lg"
                    :style="{ color: itemConfig.introColor }"
                >{{ itemConfig.intro }}</p>
            </div>

            <template v-for="(item, index) in (itemData as itemDataType[])">
                <div
                    v-if="item.isEnable"
                    :key="index"
                    class="flex gap-16"
                    :class="{ 'flex-row-reverse': item.layout === 'right' }"
                    :style="{
                        marginTop: item.marginTop + 'px',
                        marginBottom: item.marginBottom + 'px'
                    }"
                >
                    <div class="flex items-center shrink-0 w-[440px] h-[310px]">
                        <el-image
                            :src="appStore.toAbsoluteUrl(item.image)"
                            class="w-full h-full"
                        />
                    </div>
                    <div class="flex flex-col py-3 h-[310px]">
                        <div>
                            <h3 class="text-6xl mb-7" :style="{ color: item.nameColor }">
                                {{ item.name }}
                            </h3>

                            <p
                                v-if="item.textOne"
                                class="text-lg line-clamp-6 leading-relaxed mb-4"
                                :style="{ color: item.textColor }"
                            >
                                {{ item.textOne }}
                            </p>

                            <p
                                v-if="item.textTow"
                                class="text-lg line-clamp-6 leading-relaxed mb-4"
                                :style="{ color: item.textColor }"
                            >
                                {{ item.textTow }}
                            </p>
                        </div>
                        <div v-if="item.isShowBtn" class="mt-8">
                            <el-button
                                type="primary"
                                size="large"
                                class="hover:opacity-80"
                                :style="{
                                    color: item.btnTxtColor,
                                    background: item.btnBgColor,
                                    borderColor: item.btnBgColor
                                }"
                                @click="handleJump(item)"
                            >
                                {{ item.btnName }}
                            </el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </section>
</template>

<script setup lang="ts">
import { popupEnum } from '~/enums/app'
import useAppStore from '~/stores/app'
import useUserStore from '~/stores/user'
import validateUtil from '~/utils/validate'

interface itemConfigType {
    title: string;
    intro: string;
    paddingTop: number;
    paddingBottom: number;
    marginTop: number;
    marginBottom: number;
    headerBottom: number;
    bgEdg: number;
    bgColorOne: string;
    bgColorTow: string;
    bgColorThree: string;
    titleColor: string;
    introColor: string;
}

interface itemDataType {
    image: string;
    name: string;
    layout: string;
    textOne: string;
    textTow: string;
    btnName: string;
    isLogin: boolean;
    nameColor: string;
    textColor: string;
    btnBgColor: string;
    btnTxtColor: string;
    marginTop: number;
    marginBottom: number;
    isEnable: boolean;
    isShowBtn: boolean;
    link: any;
}

withDefaults(
    defineProps<{
        itemConfig?: itemConfigType,
        itemData?: itemDataType[]
    }>(),
    {
        itemConfig: {} as itemConfigType | any,
        itemData: [] as itemDataType[] | any
    }
)

const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()

const handleJump = (item: itemDataType) => {
    if (!userStore.isLogin && item.isLogin) {
        return appStore.setPopup(popupEnum.LOGIN)
    }

    if (item.link?.path) {
        if (validateUtil.isExternal(item.link?.path)) {
            window.open(item.link?.path, '_blank')
        } else {
            router.push({
                path: item.link?.path,
                query: item.link?.query
            })
        }
    }
}
</script>
